<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深度监视简写</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <h2>天气很{{info}}</h2>
    <button @click="swi()">切换</button>



</div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            ishot:true,

        },
        computed:{
            info(){
                return this.ishot? '热':'凉'
            }
        },
        methods:{
            swi(){
                this.ishot=!this.ishot
            }
        },
        watch: {
            ishot: {
                // handler什么时候调用？  ishot发生改变时
                //还可存储改变前后的数据
                deep: true,
                immediate: true,//初始化时让handler调用一次
                handler(newValue, oldValue) {
                    console.log('ishot被修改了')
                    console.log(newValue)
                    console.log(oldValue)

                }
            },
            //第一种监视简写
            info(newValue,oldValue){
                console.log('swi被修改了')
                console.log(newValue,oldValue)
            }
        }

    })
    //第二种监视简写
    vm.$watch('info',function (){ console.log('swi被修改了')})
</script>
</html>